<template>
  <div class="ja-login">
    <div class="ja-login-content">
      <div class="login-title">
        <span v-for="(item,index) in title" :style="{'animation-delay': 0.15 * index + 's'}"
              :key="index">{{ item }}</span>
      </div>
      <div class="bg_video"></div>
      <div class="ja-login-form">
        <div class="ja-login-form-title">{{ systemTitle }}</div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <el-form-item prop="account">
            <div>
              <img src="~@/assets/images/login/user.png" alt="">
              <el-input
                ref="account"
                v-model.trim="loginForm.account"
                placeholder="输入用户名"
                @keyup.enter.native="handleLogin('loginForm')"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div>
              <img src="~@/assets/images/login/password.png" alt="">
              <el-input
                ref="password"
                v-model.trim="loginForm.password"
                type="password"
                show-password
                placeholder="输入密码"
                @keyup.enter.native="handleLogin('loginForm')">
              </el-input>
            </div>
          </el-form-item>
        </el-form>
        <div class="ja-login-btn-wrap">
          <el-button class="ja-login-btn"
                     :loading="showLoading.loginLoading"
                     type="text"
                     @click.native.prevent="handleLogin('loginForm')"> 登 录
          </el-button>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { projectTitle } from '@/common/config/baseConfig'

export default {
  data () {
    return {
      systemTitle: projectTitle,
      showLoading: {
        loginLoading: false
      },
      loginForm: {
        account: 'sysAdmin',
        password: '123456'
      },
      loginRules: {
        account: { required: true, trigger: 'blur', message: '请输入用户名' },
        password: { required: true, trigger: 'blur', message: '请输入密码' }
      },
      title: 'PROFESSION • CONVENIENT'
    }
  },
  methods: {
    handleLogin (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.showLoading.loginLoading = true
          this.$store.dispatch('user/login', this.loginForm).then(async code => {
            if (code === this.$constant.SUCCESS) {
              // 获取按钮权限 菜单权限 和 个人信息
              const [res, res1] = await Promise.all([
                this.$store.dispatch('user/getBtnPermission'),
                this.$store.dispatch('user/getPermission'),
                this.$store.dispatch('user/getInfo'),
                this.$store.dispatch('user/getMenu')
              ])
              if (res && res1) {
                this.$router.push({ path: '/' })
              }
            }
            this.showLoading.loginLoading = false
          }).catch(e => {
            this.showLoading.loginLoading = false
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
  },
  mounted () {
    if (this.loginForm.userName === '') {
      this.$refs.userName.focus()
    } else if (this.loginForm.passWord === '') {
      this.$refs.passWord.focus()
    }
  }
}
</script>
<style scoped lang="scss">
.ja-login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .ja-login-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .bg_video {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      /*object-fit:cover;*/
      background: url("~@/assets/images/login/login2.jpg") no-repeat;
      background-size: 100% 100%;
    }

    .ja-login-form {
      position: relative;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      width: 6rem;
      height: 4.6rem;
      margin-bottom: 1rem;

      .ja-login-form-title {
        margin-top: 0.5rem;
        font-size: 0.4rem;
        width: 100%;
        text-align: center;
        color: #ffffff;
      }

      /*::v-deep .el-form-model{*/

      ::v-deep .el-form {
        margin: 0.4rem 0.5rem 0.2rem;
        /*.el-form-model-item{*/

        .el-form-item {
          margin-bottom: 40px !important;
        }

        .el-form-model-item__error {
          border-bottom: none !important;
          justify-content: flex-end;
          width: calc(100% - 0.04rem);
        }

        /*.el-form-model-item__content{*/

        .el-form-item__content {
          > div {
            display: flex;
            align-items: center;
            padding: .05rem;

            img {
              width: .3rem;
              margin-right: .1rem;
            }

            input,
            .el-input__inner:hover,
            .el-input.is-active .el-input__inner,
            .el-input__inner:focus {
              padding: 4px 15px;
              margin: 0 0 2px;
              height: 40px;
              background: transparent;
              color: white;
              border: 1px solid #d9d9d95c;
            }

            input:-webkit-autofill { /* 阴影透明，背景色效果 */
              -webkit-text-fill-color: #ffffff !important;
              transition: background-color 5000s ease-in-out 0s;
              font-size: 14px !important;
            }
          }
        }

      }

    }

    .ja-login-btn-wrap {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .ja-login-btn {
        border: none;
        font-size: .3rem;
        line-height: .36rem;
        position: absolute;
        top: -.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        width: 5rem;
        height: 0.6rem;
        background: $--color-primary;
      }

      ::v-deep.el-button.is-loading:before {
        background: transparent !important;
      }
    }
  }
}

.login-title {
  font-size: 0.5rem;
  color: #333333;
  font-weight: 500;
  position: absolute;
  top: 1.5rem;
  z-index: 1;
}

.login-title span {
  // 字数*0.15s （：style里设定）
  animation: shadow 3.45s linear infinite;
  padding: 10px;
}

@keyframes shadow {
  0%, 80% {
    color: #333333;
    box-shadow: none;
  }
  100% {
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff,
    0 0 20px #ffffff,
    0 0 40px #ffffff,
    0 0 80px #ffffff,
    0 0 160px #ffffff;
  }
}

</style>
